<template>
  <div>
    <div class="header">
      <!-- <img v-if="show" src="http://liufusong.top:8080/img/profile/bg.png" alt="" /> -->
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <!-- <img v-if='!show' :src="avatar" alt="" /> -->
      <div class="info">
        <div class="my_icon">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        </div>
        <div class="my_info">
          <div class="my_name">{{nickname}}</div>
          <div class="my_edit">
            <van-button type="primary" v-if="show" to="/login">去登录</van-button>
            <van-button type="primary" v-if="!show" @click="exit">退出</van-button>
            <!-- 设置文本域 -->
            <div class="content" v-if="!show">
              <slot>
                编辑个人资料<van-icon name="play" />
              </slot>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="info">
        <div class="item">
          <div class="item-content">

              <div class="item_icon">
                <van-icon name="star-o" />
                <span @click.prevent="goCollect">我的收藏</span>
              </div>

          </div>
        </div>
        <div class="item">
          <div class="item-content">

              <div class="item_icon">
                <van-icon name="wap-home-o" />
                <span @click.prevent="goMy">我的出租</span>
              </div>

          </div>
        </div>
        <div class="item">
          <div class="item-content">

              <div class="item_icon">
                <van-icon name="underway-o" />
                <span>看房记录</span>
              </div>

          </div>
        </div>
      </div>
      <div class="info">
        <div class="item">
          <div class="item-content">

              <div class="item_icon">
                <van-icon name="idcard" />
                <span>成为房主</span>
              </div>

          </div>
        </div>
        <div class="item">
          <div class="item-content">

              <div class="item_icon">
                <van-icon name="contact" />
                <span>个人资料</span>
              </div>

          </div>
        </div>
        <div class="item">
          <div class="item-content">

              <div class="item_icon">
                <van-icon name="service-o" />
                <span>联系我们</span>
              </div>

          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'VueUser',

  data () {
    return {
      avatar: '',
      nickname: '',
      id: '',
      show: true
    }
  },
  created () {
    this.getUserInfo()
  },

  mounted () {
  },

  methods: {
    async getUserInfo () {
      try {
        const res = await request({
          url: '/user'
        })
        this.avatar = res.body.avatar
        this.nickname = res.body.nickname
        this.id = res.body.id
        this.show = false
      } catch (error) {
        console.log(error)
      }
    },
    // 退出
    exit () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确定退出'
      })
        .then(() => {
          // on confirm
          localStorage.removeItem('token')
          this.show = true
          // this.$router.go(0)
          this.nickname = '游客'
        })
        .catch(() => {
          // on cancel
        })
    },
    goCollect () {
      this.$router.push({
        path: '/collect'
      })
    },
    goMy () {
      this.$router.push('/my')
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  min-height: 300px;
  position: relative;
  img {
    width: 100%;
    border-style: none;
  }
  .info {
    position: absolute;
    background: #fff;
    width: 85%;
    height: 55%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    .my_icon {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .my_info {
      padding-top: 15px;
      .my_name {
        margin-top: -30px;
        margin-bottom: 10px;
      }
      .my_edit {
        color: #999;
        font-size: 12px;
        margin-top: 20px;
        .van-button.van-button--primary.van-button--normal {
          background-color: #21b97a;
          border-radius: 10%;
          height: 30px;
        }
      }
      .content{
        margin-top:20px ;
      }
    }
  }
}
.main {
  .info {
    background-color: inherit;
    background: #fff;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    overflow: hidden;
    display: flex;
    align-items: center;
    .item {
      position: relative;
      margin-left: 0;
      box-sizing: border-box;
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
      &::before {
        padding-bottom: 20%;
        display: block;
        content: " ";
      }
      .item-content {
        text-align: center;
        width: 100%;
        height: 100%;
        padding: 15px 0;
        .item_icon {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          font-size: 13px;
          color: #333;

            font-size: 16px;
            margin-bottom: 10px;

        }
      }
    }
  }
}
.foot {
  text-align: center;
  margin-top: 10px;
  img {
    width: 92%;
    border-style: none;
  }
}
</style>
